
.design{

    .search-box{
        display: flex;
        align-items: center;
        .layui-input-wrap{
            flex: 1;
            .layui-input{
                background: #F6F6F6;
                border-radius: 16px;
                border: 1px solid #ECF1F6;
            }
        }

        .btn-box{
            margin-left: 30px;
            button{
                border-radius:10px
            }
        }
    }

    

    .list{
        margin-top: 40px;
        ul{
            display: grid;
            justify-content: space-between;
            grid-template-columns: repeat(auto-fill, 242px);
            li{
                margin-bottom: 32px;
                width: 242px;
                img{
                    width: 100%;
                    height: 300px;
                }
                span{
                    display: inline-block;
                    margin: 16px 0 10px;
                    font-size: 18px;
                    color: #1D1D1F;
                    font-weight: bold;
                }
                p{
                    color: #999;
                }
            }
        }
    }
    

    // 合成图纸
    .space25{
        position: relative;
        &::before{
            display: inline-block;
            width: 1px;
            height: 100%;
            position: absolute;
            left: 50%;
            top: 0;
            background-color: #EDF2F7;
        }
        >div{
            padding: 0 25px;
        }
        
        &:nth-child(2){
            border-left: 1px solid #EDF2F7;
        }
    }
    .drawing-form-box{
        padding: 15px 0;
        .layui-form-label{
            width: 135px;
        }
        .layui-input-block{
            margin-left: 145px;
        }
        

        .title{
            color: #1F2C37;
            font-size: 18px;
        }
        .layui-upload-drag{
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 152px;
            height: 75px;
            background: #F6F7FC;
            border-radius: 15px 15px 15px 15px;
            border: 2px dashed #55B0FB;
            .layui-icon{
                font-size: 36px;
                color: #01A2E4;
            }
        }

        .line{
            height: 1px;
            background-color: #EDF2F7;
            margin-bottom: 10px;
        }

        
    }

    .drawing-select{

        .layui-upload-drag{
            height: 500px;
            background: #F6F7FC;
            border-radius: 20px 20px 20px 20px;
            border: 2px dashed #55B0FB;
            color: #999;
            display: flex !important;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            overflow: hidden;
        }


        .add-btn{
            margin-top: 16px;
            cursor: pointer;
            width: 100%;
            height: 80px;
            text-align: center;
            line-height: 80px;
            background: #F6F7FC;
            border-radius: 5px 5px 5px 5px;
            color: #1A202C;
            font-size: 18px;
            i{font-size: 14px;}
        }

        .view{
            max-height: 500px;
            border-radius: 20px 20px 20px 20px;
            overflow: hidden;
            margin-top: 8px;
            img{
                width: 100%;
            }
        }
    }

    .btn-center{
        margin-top: 20px;
        button+button{
            margin-left: 56px;
        }
    }
    
    .view-tag{
        .layui-form-item{
            margin-bottom: 0;
        }
        .layui-form-label{
            width: 96px;
            font-size: 18px;
        }
        .layui-input-block{
            margin-left: 145px;
            line-height: 36px;
            font-size: 14px;
        }
    }

    .drawing-success{
        display: flex;
        align-items: center;
        flex-direction: column;
        padding-top: 160px;

        .iconfont{
            font-size: 72px;
            color: #52C41A;
            margin-bottom: 24px;
        }
        span{
            font-size: 24px;
            color: #1F2C37;
        }

        p{font-size: 16px;
        color: #999;}
    }
}

.layui-table-drawing-select{
    
    .layui-table-header{
        background: #2A2E41;
        border-radius: 5px 5px 5px 5px;
        .layui-table{
            background-color: transparent;
            color: #fff !important;
        }
    }
}



.drawing-select-dialog{
    .layui-form{
        margin-top: 32px;
    }
    .layui-form-label{
        width: 100px;
    }
    .layui-input-block{
        margin-left: 110px;
    }

    .drawing-list{
        
        ul{
            width: (193px+24px) * 5 ;
            display: flex;
            flex-wrap: wrap;
        }
        li{
            width: 193px;
            position:relative;
            margin: 0 12px 12px;
            img{
                width: 193px;
                height: 148px;
                box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.2);
                border-radius: 10px 10px 10px 10px;
                opacity: 1;
                border: 1px solid #E0E0E0;
                margin-bottom: 10px;
            }
            span{
                color: #1D1D1F;
                font-size: 18px;
            }
            p{
                font-size: 14px;
                color: #999;
            }

            input{
                position: absolute;
                top: 124px;
                right: 13px;
            }
        }
    }
}


.drawing-view-dialog{
    .view-layout{
        display: flex;
        .view{
            margin-top: 40px;
            margin-right: 32px;
            width: 618px;
            height: 702px;
            border-radius: 20px 20px 20px 20px;
            overflow: hidden;
            >img{
                width: 100%;
                height: 100%;
            }
        }
    .layui-tab{
        width: 560px;
        border-left: 1px solid #ECF1F6;
        padding-left: 32px;
    }

        .note-list {
            height: calc(100vh - 386px);
            overflow: auto;

            li {
                border-bottom: 1px solid #EDF2F7;
                padding: 24px 16px 16px;

                .user {
                    display: flex;

                    img {
                        width: 38px;
                        height: 38px;
                        margin-right: 15px;
                    }

                    .title {
                        flex: 1;

                        >div {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;

                            .time {
                                color: #999;
                            }
                        }

                        span {
                            font-size: 18px;
                            font-weight: bold;
                            margin-bottom: 5px;
                        }

                        p {

                            color: #999;
                        }
                    }
                }

                .supplement {
                    display: flex;
                    justify-content: space-between;

                    .time {
                        font-size: 14px;
                        color: #999;
                    }
                }
            }
        }

        .record {
            height: calc(100vh - 297px);
        }

        .publish {
            padding: 26px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .layui-btn {
                margin-left: 24px;
                height: 36px;
                line-height: 36px;
                border-radius: 5px;
            }

            .layui-input {
                height: 36px;
                line-height: 36px;
                border-radius: 5px;
            }
        }

        .word-details {
            padding: 30px 28px;
    
            >div {
                margin-bottom: 32px;
    
                &.file {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
    
                    img {
                        width: 80px;
                        height: 80px;
                    }
    
                    p {
                        font-size: 18px;
                        font-weight: bold;
                        margin-top: 5px;
                    }
                }
    
                .title {
                    font-size: 18px;
    
                    font-weight: bold;
                    margin-bottom: 18px;
                }
    
                >div {
                    line-height: 34px;
                    display: flex;
    
                    >span {
                        &:nth-child(1) {
                            font-weight: bold;
                            min-width: 70px;
                        }
    
                        &:nth-child(2) {
                            color: #999;
                        }
                    }
                }
            }
        }
    }
}